<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="编号" prop="projectNumber">
        <el-input
          v-model="queryParams.projectNumber"
          placeholder="编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属行业" prop="industry">
        <el-input
          v-model="queryParams.industry"
          placeholder="请输入项目所属行业"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属单位" prop="company">
        <el-input
          v-model="queryParams.company"
          placeholder="请输入所属单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="二级单位" prop="secondaryCompany">
        <el-input
          v-model="queryParams.secondaryCompany"
          placeholder="请输入项目所属二级单位"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目报价" prop="quotedPrice">
        <el-input
          v-model="queryParams.quotedPrice"
          placeholder="请输入项目报价"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="开始日期" prop="commencementDate">
        <el-date-picker
          v-model="queryParams.commencementDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="结束日期" prop="completionDate">
        <el-date-picker
          clearable
          v-model="queryParams.completionDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择结束日期"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="对接人姓名" prop="partyAContact">
        <el-input
          v-model="queryParams.partyAContact"
          placeholder="请输入对接人姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="负责人姓名" prop="initiationPersonInCharge">
        <el-input
          v-model="queryParams.initiationPersonInCharge"
          placeholder="请输入负责人姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="立项时间" prop="creationDate">
        <el-date-picker
          clearable
          v-model="queryParams.creationDate"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择立项时间"
        >
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="预留字段，用于后续业务扩展" prop="reservedField1">
        <el-input
          v-model="queryParams.reservedField1"
          placeholder="请输入预留字段，用于后续业务扩展"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预留字段，用于后续业务扩展" prop="reservedField2">
        <el-input
          v-model="queryParams.reservedField2"
          placeholder="请输入预留字段，用于后续业务扩展"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:initiation:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:initiation:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:initiation:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:initiation:export']"
          >导出</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button plain icon="el-icon-upload" size="mini" @click="handleUpload"
          >资料上传</el-button
        >
        <!-- v-hasPermi="['system:initiation:export']" -->
      </el-col>
      <el-col :span="1.5">
        <el-button plain icon="el-icon-upload" size="mini" @click="elsxUpload"
          >表格导入</el-button
        >
        <!-- v-hasPermi="['system:initiation:export']" -->
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="initiationList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="id" align="center" prop="id" /> -->
      <el-table-column
        label="项目名称"
        align="center"
        prop="projectContent"
        show-overflow-tooltip
      />
      <el-table-column label="项目编号" align="center" prop="projectNumber" />
      <el-table-column label="客户单位" align="center" prop="company" />
      <el-table-column
        label="二级单位"
        align="center"
        prop="secondaryCompany"
      />
      <el-table-column
        label="竣工日期"
        align="center"
        prop="completionDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.completionDate, "{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="开工日期"
        align="center"
        prop="commencementDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.commencementDate, "{y}-{m}-{d}")
          }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="所属行业" align="center" prop="industry" /> -->

      <el-table-column label="报价金额" align="center" prop="quotedPrice" />
      <el-table-column label="合同金额" align="center" prop="contractAmount" />
      <el-table-column label="开票状态" align="center" prop="invoiceStatus" />
      <el-table-column label="是否开齐">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.isInvoiceOpened == '是'"
            @click="
              () => {
                scope.row.isInvoiceOpened = '否';
                handleUp(scope.row);
              }
            "
            >是</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.isInvoiceOpened == '否'"
            @click="
              () => {
                scope.row.isInvoiceOpened = '是';
                handleUp(scope.row);
              }
            "
            >否</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="回款状态">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.receivablesStatus == '是'"
            @click="
              () => {
                scope.row.receivablesStatus = '否';
                handleUp(scope.row);
              }
            "
            >是</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.receivablesStatus == '否'"
            @click="
              () => {
                scope.row.receivablesStatus = '是';
                handleUp(scope.row);
              }
            "
            >否</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        fixed="right"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:initiation:edit']"
            >修改</el-button
          >
          <!-- v-show="
              scope.row.managementApproval == 0 ||
              scope.row.managementApproval == 0
            " -->
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:initiation:remove']"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.managementApprovala == '已审批'"
            @click="handleCost(scope.row)"
            v-hasPermi="['system:initiation:remove']"
            >实际成本填写</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleInvoice(scope.row)"
            v-hasPermi="['system:initiation:remove']"
            >发票填写</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleProject(scope.row)"
            v-if="userName == '高琪'"
            >立项完成</el-button
          >
          <!-- <el-button size="mini" type="text" @click="handleReceived(scope.row)"
            >回款完成</el-button
          > -->
          <el-button
            size="mini"
            type="text"
            v-if="scope.row.managementApprovala == '已审批'"
            @click="handleFile(scope.row)"
            >立项合同查看</el-button
          >
          <el-button size="mini" type="text" @click="handleSummary(scope.row)"
            >金额汇总</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改记录项目立项的相关信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="单位详情" prop="projectContent" v-show="form.id">
          {{ form.company }}/{{ form.industry }}/{{ form.secondaryCompany }}
        </el-form-item>

        <el-form-item
          label="二级单位"
          prop="secondaryCompany"
          v-show="!form.id"
        >
          <el-cascader
            v-model="form.secondaryCompany"
            :options="unitList"
            @change="handleUnitList"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="项目内容">
          <el-input
            v-model="form.projectContent"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入项目内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="报价金额" prop="quotedPrice">
          <el-input
            v-model="form.quotedPrice"
            placeholder="仅允许输入数字"
            @input="handleInputQuotedPrice"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="开始日期" prop="commencementDate">
          <el-date-picker
            clearable
            v-model="form.commencementDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期" prop="completionDate">
          <el-date-picker
            clearable
            v-model="form.completionDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="对接人姓名" prop="partyAContact">
          <el-input
            v-model="form.partyAContact"
            placeholder="请输入对接人姓名"
          />
        </el-form-item>
        <el-form-item label="立项时间" prop="creationDate">
          <el-date-picker
            clearable
            v-model="form.creationDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择立项时间"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 预算列表 -->
        <div v-show="form.id != null && form.id != '' && form.id != undefined">
          <h2>预算列表</h2>
          <!-- 供应商采购 -->
          <div v-show="userName == userFilledBy">
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              供应商采购
            </div>

            <listTop></listTop>

            <div
              v-for="(item, index) in vendorAddList || []"
              :key="index"
              style="text-align: center"
            >
              <el-row
                style="margin-bottom: 20px"
                v-if="
                  form.managementApproval != '已审批' ||
                  form.managementApprovala != '已审批'
                "
              >
                <el-col :span="2">
                  <el-button type="danger" @click="delItem(item, '供应商')"
                    >删除</el-button
                  >
                </el-col>
                <el-col :span="2">
                  <el-input
                    v-model="item.serialNumber"
                    :disabled="true"
                    placeholder="请输入"
                  />
                </el-col>

                <el-col :span="4">
                  <el-select
                    v-model="item.categoryName"
                    clearable
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择"
                    @change="handleSupplier(item, item.categoryName)"
                  >
                    <el-option
                      v-for="item in supplierList"
                      :key="item.id"
                      :label="item.categoryName"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.specificationModel"
                    placeholder="请输入"
                  />
                </el-col>

                <el-col :span="4">
                  <el-select
                    v-model="item.supplier"
                    clearable
                    filterable
                    allow-create
                    placeholder="请选择"
                    @change="handleSupplierChange"
                  >
                    <el-option
                      v-for="item in suppliersList"
                      :key="item.id"
                      :label="item.supplierName"
                      :value="item.supplierName"
                    >
                    </el-option>
                  </el-select>
                  <!-- suppliersList -->
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.quantity"
                    placeholder="请输入数量"
                    @input="calculateTotalBudget(item)"
                  />
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.unitPrice"
                    placeholder="请输入单价"
                    @input="calculateTotalBudget(item)"
                  />
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.totalBudget"
                    readonly
                    placeholder="请输入"
                  />
                </el-col>
              </el-row>

              <el-row
                style="margin-bottom: 20px"
                v-if="
                  form.managementApproval == '已审批' &&
                  form.managementApprovala == '已审批'
                "
              >
                <el-col
                  :span="2"
                  v-if="
                    form.managementApproval != '已审批' &&
                    form.managementApprovala != '已审批'
                  "
                >
                  <el-button type="danger" @click="delItem(item, '供应商')"
                    >删除</el-button
                  >
                </el-col>
                <el-col
                  :span="2"
                  v-if="
                    form.managementApproval == '已审批' &&
                    form.managementApprovala == '已审批'
                  "
                >
                  无权限
                </el-col>
                <el-col :span="2">
                  {{ item.serialNumber }}
                </el-col>

                <el-col :span="4">
                  {{ item.categoryName }}
                </el-col>

                <el-col :span="2">
                  {{ item.specificationModel }}
                </el-col>

                <el-col :span="4">
                  {{ item.supplier }}
                </el-col>

                <el-col :span="2">
                  {{ item.quantity }}
                </el-col>

                <el-col :span="2">
                  {{ item.unitPrice }}
                </el-col>

                <el-col :span="2">
                  {{ item.totalBudget }}
                </el-col>
              </el-row>
            </div>

            <!-- 供应商采购的确定按钮 -->
            <div
              style="text-align: right"
              v-if="
                form.managementApproval != '已审批' ||
                form.managementApprovala != '已审批'
              "
            >
              <el-button @click="addItem('vendorAddList', '供应商')"
                >新增</el-button
              >
              <el-button @click="submitItem('vendorAddList')">保存</el-button>
            </div>
          </div>

          <!-- 电商采购 -->
          <div v-show="userName == userFilledBy">
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              电商采购
            </div>

            <listTop></listTop>

            <div
              v-for="(item, index) in ECommerceAddList"
              :key="index"
              style="text-align: center"
            >
              <el-row
                style="margin-bottom: 20px"
                v-if="
                  form.managementApproval != '已审批' ||
                  form.managementApprovala != '已审批'
                "
              >
                <el-col :span="2">
                  <el-button type="danger" @click="delItem(item, '电商')"
                    >删除</el-button
                  >
                </el-col>
                <el-col :span="2">
                  <el-input
                    v-model="item.serialNumber"
                    :disabled="true"
                    placeholder="请输入"
                  />
                </el-col>

                <el-col :span="4">
                  <el-select
                    v-model="item.categoryName"
                    clearable
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择"
                    @change="handleSupplier(item, item.categoryName)"
                  >
                    <el-option
                      v-for="item in supplierList"
                      :key="item.id"
                      :label="item.categoryName"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.specificationModel"
                    placeholder="请输入"
                  />
                </el-col>

                <el-col :span="4">
                  <el-select
                    v-model="item.supplier"
                    clearable
                    filterable
                    allow-create
                    placeholder="请选择"
                    @change="handleSupplierChange"
                  >
                    <el-option
                      v-for="item in suppliersList"
                      :key="item.id"
                      :label="item.supplierName"
                      :value="item.supplierName"
                    >
                    </el-option>
                  </el-select>
                  <!-- suppliersList -->
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.quantity"
                    placeholder="请输入数量"
                    @input="calculateTotalBudget(item)"
                  />
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.unitPrice"
                    placeholder="请输入单价"
                    @input="calculateTotalBudget(item)"
                  />
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.totalBudget"
                    readonly
                    placeholder="请输入"
                  />
                </el-col>
              </el-row>

              <el-row
                style="margin-bottom: 20px"
                v-if="
                  form.managementApproval == '已审批' &&
                  form.managementApprovala == '已审批'
                "
              >
                <el-col
                  :span="2"
                  v-if="
                    form.managementApproval != '已审批' &&
                    form.managementApprovala != '已审批'
                  "
                >
                  <el-button type="danger" @click="delItem(item, '供应商')"
                    >删除</el-button
                  >
                </el-col>
                <el-col
                  :span="2"
                  v-if="
                    form.managementApproval == '已审批' &&
                    form.managementApprovala == '已审批'
                  "
                >
                  无权限
                </el-col>
                <el-col :span="2">
                  {{ item.serialNumber }}
                </el-col>

                <el-col :span="4">
                  {{ item.categoryName }}
                </el-col>

                <el-col :span="2">
                  {{ item.specificationModel }}
                </el-col>

                <el-col :span="4">
                  {{ item.supplier }}
                </el-col>

                <el-col :span="2">
                  {{ item.quantity }}
                </el-col>

                <el-col :span="2">
                  {{ item.unitPrice }}
                </el-col>

                <el-col :span="2">
                  {{ item.totalBudget }}
                </el-col>
              </el-row>
            </div>

            <!-- 电商采购的确定按钮 -->
            <div
              style="text-align: right"
              v-if="
                form.managementApproval != '已审批' ||
                form.managementApprovala != '已审批'
              "
            >
              <el-button @click="addItem('ECommerceAddList', '电商')"
                >新增</el-button
              >
              <el-button @click="submitItem('ECommerceAddList')"
                >保存</el-button
              >
            </div>
          </div>

          <!-- 零星采购 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              零星采购
            </div>

            <listTop></listTop>

            <div
              v-for="(item, index) in sporadicAddList"
              :key="index"
              style="text-align: center"
            >
              <el-row
                style="margin-bottom: 20px"
                v-if="
                  form.managementApproval != '已审批' ||
                  form.managementApprovala != '已审批'
                "
              >
                <el-col :span="2">
                  <el-button type="danger" @click="delItem(item, '零星')"
                    >删除</el-button
                  >
                </el-col>
                <el-col :span="2">
                  <el-input
                    v-model="item.serialNumber"
                    :disabled="true"
                    placeholder="请输入"
                  />
                </el-col>

                <el-col :span="4">
                  <el-select
                    v-model="item.categoryName"
                    clearable
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择"
                    @change="handleSupplier(item, item.categoryName)"
                  >
                    <el-option
                      v-for="item in supplierList"
                      :key="item.id"
                      :label="item.categoryName"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.specificationModel"
                    placeholder="请输入"
                  />
                </el-col>

                <el-col :span="4">
                  <el-select
                    v-model="item.supplier"
                    clearable
                    filterable
                    allow-create
                    placeholder="请选择"
                    @change="handleSupplierChange"
                  >
                    <el-option
                      v-for="item in suppliersList"
                      :key="item.id"
                      :label="item.supplierName"
                      :value="item.supplierName"
                    >
                    </el-option>
                  </el-select>
                  <!-- suppliersList -->
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.quantity"
                    placeholder="请输入数量"
                    @input="calculateTotalBudget(item)"
                  />
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.unitPrice"
                    placeholder="请输入单价"
                    @input="calculateTotalBudget(item)"
                  />
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.totalBudget"
                    readonly
                    placeholder="请输入"
                  />
                </el-col>
              </el-row>

              <el-row
                style="margin-bottom: 20px; text-align: center"
                v-if="
                  form.managementApproval == '已审批' &&
                  form.managementApprovala == '已审批'
                "
              >
                <el-col
                  :span="2"
                  v-if="
                    form.managementApproval != '已审批' &&
                    form.managementApprovala != '已审批'
                  "
                >
                  <el-button type="danger" @click="delItem(item, '供应商')"
                    >删除</el-button
                  >
                </el-col>
                <el-col
                  :span="2"
                  v-if="
                    form.managementApproval == '已审批' &&
                    form.managementApprovala == '已审批'
                  "
                >
                  无权限
                </el-col>
                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.serialNumber"
                    :disabled="true"
                    placeholder="请输入"
                  /> -->
                  {{ item.serialNumber }}
                </el-col>

                <el-col :span="4">
                  {{ item.categoryName }}
                </el-col>

                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.specificationModel"
                    placeholder="请输入"
                  /> -->
                  {{ item.specificationModel }}
                </el-col>

                <el-col :span="4">
                  <!-- <el-select
                    v-model="item.supplier"
                    clearable
                    filterable
                    allow-create
                    placeholder="请选择"
                    @change="handleSupplierChange"
                  >
                    <el-option
                      v-for="item in suppliersList"
                      :key="item.supplierName"
                      :label="item.supplierName"
                      :value="item.supplierName"
                    >
                    </el-option>
                  </el-select> -->
                  {{ item.supplier }}
                </el-col>

                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.quantity"
                    placeholder="请输入数量"
                    @input="calculateTotalBudget(item)"
                  /> -->
                  {{ item.quantity }}
                </el-col>

                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.unitPrice"
                    placeholder="请输入单价"
                    @input="calculateTotalBudget(item)"
                  /> -->
                  {{ item.unitPrice }}
                </el-col>

                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.totalBudget"
                    readonly
                    placeholder="请输入"
                  /> -->
                  {{ item.totalBudget }}
                </el-col>
              </el-row>
            </div>

            <!-- 零星采购的确定按钮 -->
            <div
              style="text-align: right"
              v-if="
                form.managementApproval != '已审批' ||
                form.managementApprovala != '已审批'
              "
            >
              <el-button @click="addItem('sporadicAddList', '零星')"
                >新增</el-button
              >
              <el-button @click="submitItem('sporadicAddList')">保存</el-button>
            </div>
          </div>

          <!-- 其他采购 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              其他采购
            </div>

            <listTop></listTop>

            <div
              v-for="(item, index) in otherAddList"
              :key="index"
              style="text-align: center"
            >
              <el-row
                style="margin-bottom: 20px"
                v-if="
                  form.managementApproval != '已审批' ||
                  form.managementApprovala != '已审批'
                "
              >
                <el-col :span="2">
                  <el-button type="danger" @click="delItem(item, '其他')"
                    >删除</el-button
                  >
                </el-col>
                <el-col :span="2">
                  <el-input
                    v-model="item.serialNumber"
                    :disabled="true"
                    placeholder="请输入"
                  />
                </el-col>

                <el-col :span="4">
                  <el-select
                    v-model="item.categoryName"
                    clearable
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择"
                    @change="handleSupplier(item, item.categoryName)"
                  >
                    <el-option
                      v-for="item in supplierList"
                      :key="item.id"
                      :label="item.categoryName"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.specificationModel"
                    placeholder="请输入"
                  />
                </el-col>

                <el-col :span="4">
                  <el-select
                    v-model="item.supplier"
                    clearable
                    filterable
                    allow-create
                    placeholder="请选择"
                    @change="handleSupplierChange"
                  >
                    <el-option
                      v-for="item in suppliersList"
                      :key="item.id"
                      :label="item.supplierName"
                      :value="item.supplierName"
                    >
                    </el-option>
                  </el-select>
                  <!-- suppliersList -->
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.quantity"
                    placeholder="请输入数量"
                    @input="calculateTotalBudget(item)"
                  />
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.unitPrice"
                    placeholder="请输入单价"
                    @input="calculateTotalBudget(item)"
                  />
                </el-col>

                <el-col :span="2">
                  <el-input
                    v-model="item.totalBudget"
                    readonly
                    placeholder="请输入"
                  />
                </el-col>
              </el-row>

              <el-row
                style="margin-bottom: 20px; text-align: center"
                v-if="
                  form.managementApproval == '已审批' &&
                  form.managementApprovala == '已审批'
                "
              >
                <el-col
                  :span="2"
                  v-if="
                    form.managementApproval != '已审批' &&
                    form.managementApprovala != '已审批'
                  "
                >
                  <el-button type="danger" @click="delItem(item, '供应商')"
                    >删除</el-button
                  >
                </el-col>
                <el-col
                  :span="2"
                  v-if="
                    form.managementApproval == '已审批' &&
                    form.managementApprovala == '已审批'
                  "
                >
                  无权限
                </el-col>
                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.serialNumber"
                    :disabled="true"
                    placeholder="请输入"
                  /> -->
                  {{ item.serialNumber }}
                </el-col>

                <el-col :span="4">
                  {{ item.categoryName }}
                </el-col>

                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.specificationModel"
                    placeholder="请输入"
                  /> -->
                  {{ item.specificationModel }}
                </el-col>

                <el-col :span="4">
                  <!-- <el-select
                    v-model="item.supplier"
                    clearable
                    filterable
                    allow-create
                    placeholder="请选择"
                    @change="handleSupplierChange"
                  >
                    <el-option
                      v-for="item in suppliersList"
                      :key="item.supplierName"
                      :label="item.supplierName"
                      :value="item.supplierName"
                    >
                    </el-option>
                  </el-select> -->
                  {{ item.supplier }}
                </el-col>

                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.quantity"
                    placeholder="请输入数量"
                    @input="calculateTotalBudget(item)"
                  /> -->
                  {{ item.quantity }}
                </el-col>

                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.unitPrice"
                    placeholder="请输入单价"
                    @input="calculateTotalBudget(item)"
                  /> -->
                  {{ item.unitPrice }}
                </el-col>

                <el-col :span="2">
                  <!-- <el-input
                    v-model="item.totalBudget"
                    readonly
                    placeholder="请输入"
                  /> -->
                  {{ item.totalBudget }}
                </el-col>
              </el-row>
            </div>

            <div
              style="text-align: right"
              v-if="
                form.managementApproval != '已审批' ||
                form.managementApprovala != '已审批'
              "
            >
              <el-button @click="addItem('otherAddList', '其他')"
                >新增</el-button
              >
              <el-button @click="submitItem('otherAddList')">保存</el-button>
            </div>
          </div>

          <SumData
            :vendorAddList="vendorAddList"
            :ECommerceAddList="ECommerceAddList"
            :sporadicAddList="sporadicAddList"
            :otherAddList="otherAddList"
          />
        </div>

        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="submitForm"
            v-show="form.id == '' || form.id == null"
            >提交审核</el-button
          >
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 批量添加发票弹出层 -->
    <el-dialog
      title="发票开具"
      :visible.sync="openInvoice"
      width="80%"
      append-to-body
    >
      <InvoiceTop />
      <div v-for="(item, index) in invoiceList" :key="index">
        <el-row style="margin-bottom: 20px; text-align: center">
          <el-col :span="4">
            <el-input v-model="item.projectNumber" placeholder="请输入" />
          </el-col>
          <el-col :span="2">
            <el-input v-model="item.clientName" placeholder="请输入" />
          </el-col>
          <el-col :span="3">
            <el-input v-model="item.invoicedAmount" placeholder="请输入" />
          </el-col>
          <el-col :span="3">
            <el-select v-model="item.issuingCompany" placeholder="请选择">
              <el-option
                v-for="item in companyList"
                :key="item.value"
                :label="item.companyName"
                :value="item.companyName"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="3">
            <el-select v-model="item.taxRate" placeholder="请选择">
              <el-option
                v-for="item in rateList"
                :key="item.value"
                :label="item.taxRate + '%'"
                :value="item.taxRate"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="item.invoiceType" placeholder="请选择">
              <el-option
                v-for="item in invoiceTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="item.issuingType" placeholder="请选择">
              <el-option
                v-for="item in typesList"
                :key="item.value"
                :label="item.issuingType"
                :value="item.issuingType"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="2">
            <el-button type="danger" @click="deleteInvoice(item)"
              >删除</el-button
            >
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addInvoice">新 增</el-button>
        <el-button @click="submitInvoice">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 实际成本弹出层 -->
    <el-dialog
      title="采购预算"
      :visible.sync="openCost"
      width="98%"
      append-to-body
    >
      <div style="display: flex">
        <!-- 预算列表 -->
        <div style="flex: 1; margin-right: 20px">
          <h2>预算列表</h2>

          <!-- 供应商采购 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              供应商采购
            </div>

            <listTop></listTop>

            <div v-for="(item, index) in vendorAddList" :key="index">
              <el-row
                style="
                  margin-bottom: 20px;
                  margin-top: 20px;
                  text-align: center;
                "
              >
                <el-col :span="2"> 无权限 </el-col>
                <el-col :span="2">
                  {{ item.serialNumber }}
                </el-col>
                <el-col :span="4">
                  {{ item.categoryName }}
                </el-col>
                <el-col :span="2">
                  {{ item.specificationModel }}
                </el-col>
                <el-col :span="4">
                  {{ item.supplier }}
                </el-col>
                <el-col :span="2">
                  {{ item.quantity }}
                </el-col>
                <el-col :span="2">
                  {{ item.unitPrice }}
                </el-col>
                <el-col :span="2">
                  {{ item.totalBudget }}
                </el-col>
                <el-col :span="2">
                  <el-button
                    v-if="
                      userName == 'admin' ||
                      userName == '高琪' ||
                      userName == userFilledBy
                    "
                    @click="addCostItem('vendorAddCostList', '供应商', item)"
                    >添加采购</el-button
                  >
                  <div v-else>无权限</div>
                </el-col>
              </el-row>

              <div style="border: 2px solid #ccc" >
                <bai-list-top></bai-list-top >

                <el-row
                  style="padding: 15px 20px; text-align: center"
                  v-for="(item, costIndex) in item.oaOtheraPurchases"
                  :key="costIndex"
                >
                  <el-col :span="2">
                    <span
                      style="border-bottom: 1px solid #569cd6; color: #569cd6"
                      @click="delCost(item, index, costIndex)"
                      >删除</span
                    >

                    <span
                      style="
                        border-bottom: 1px solid #569cd6;
                        color: #569cd6;
                        margin-left: 10px;
                      "
                      v-if="
                        (item.invoiceReview != '1' && item.liApprove != '1' && item.liuApprove != '1' && item.principalApprove != '1') && Number(item.actualPrice) > Number(item.verifiedAmount)
                      "
                      @click="ticketCost(item, '供应商', costIndex)"
                      >追加</span
                    >
                  </el-col>
                  <el-col :span="1">
                    {{ index + 1 }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.purchaseTableSequence }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.actualPrice }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.paymentDate }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.invoiceStatus }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.verifiedAmount }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.invoiceStatus }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                  <el-col :span="2">
                    {{ item.paymentAccount }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <!-- 电商 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              电商采购
            </div>

            <listTop></listTop>

            <div v-for="(item, index) in ECommerceAddList" :key="index">
              <el-row
                style="
                  margin-bottom: 20px;
                  margin-top: 20px;
                  text-align: center;
                "
              >
                <el-col :span="2"> 无权限 </el-col>
                <el-col :span="2">
                  {{ item.serialNumber }}
                </el-col>
                <el-col :span="4">
                  {{ item.categoryName }}
                </el-col>
                <el-col :span="2">
                  {{ item.specificationModel }}
                </el-col>
                <el-col :span="4">
                  {{ item.supplier }}
                </el-col>
                <el-col :span="2">
                  {{ item.quantity }}
                </el-col>
                <el-col :span="2">
                  {{ item.unitPrice }}
                </el-col>
                <el-col :span="2">
                  {{ item.totalBudget }}
                </el-col>
                <el-col :span="2">
                  <el-button
                    v-if="userName == 'admin' || userName == '高琪'"
                    @click="addCostItem('ECommerceAddCostList', '电商', item)"
                    >添加采购</el-button
                  >
                  <div v-else>无权限</div>
                </el-col>
              </el-row>

              <!-- v-if="item.oaOtheraPurchases.length > 0" -->
              <div style="border: 2px solid #ccc">
                <bai-list-top></bai-list-top>

                <el-row
                  style="padding: 15px 20px; text-align: center"
                  v-for="(item, costIndex) in item.oaOtheraPurchases"
                  :key="costIndex"
                >
                  <el-col :span="2">
                    <span
                      style="border-bottom: 1px solid #569cd6; color: #569cd6"
                      @click="delCost(item, index, costIndex)"
                      >删除</span
                    >

                    <span
                      style="
                        border-bottom: 1px solid #569cd6;
                        color: #569cd6;
                        margin-left: 10px;
                      "
                      v-if="
                        (item.invoiceReview != '1' && item.liApprove != '1' && item.liuApprove != '1' && item.principalApprove != '1') && Number(item.actualPrice) > Number(item.verifiedAmount)
                      "
                      @click="ticketCost(item, '供应商', costIndex)"
                      >追加</span
                    >
                  </el-col>
                  <el-col :span="1">
                    {{ index + 1 }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.purchaseTableSequence }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.actualPrice }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.paymentDate }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.invoiceStatus }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.verifiedAmount }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.invoiceStatus }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                  <el-col :span="2">
                    {{ item.paymentAccount }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <!-- 零星 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              零星采购
            </div>

            <listTop></listTop>

            <div v-for="(item, index) in sporadicAddList" :key="index">
              <el-row
                style="
                  margin-bottom: 20px;
                  margin-top: 20px;
                  text-align: center;
                "
              >
                <el-col :span="2"> 无权限 </el-col>
                <el-col :span="2">
                  {{ item.serialNumber }}
                </el-col>
                <el-col :span="4">
                  {{ item.categoryName }}
                </el-col>
                <el-col :span="2">
                  {{ item.specificationModel }}
                </el-col>
                <el-col :span="4">
                  {{ item.supplier }}
                </el-col>
                <el-col :span="2">
                  {{ item.quantity }}
                </el-col>
                <el-col :span="2">
                  {{ item.unitPrice }}
                </el-col>
                <el-col :span="2">
                  {{ item.totalBudget }}
                </el-col>
                <el-col :span="2">
                  <el-button
                    @click="addCostItem('sporadicAddCostList', '零星', item)"
                    >添加采购</el-button
                  >
                </el-col>
              </el-row>

              <!-- v-if="item.oaOtheraPurchases.length > 0" -->
              <div style="border: 2px solid #ccc">
                <bai-list-top></bai-list-top>

                <el-row
                  style="padding: 15px 20px; text-align: center"
                  v-for="(item, costIndex) in item.oaOtheraPurchases"
                  :key="costIndex"
                >
                  <el-col :span="2">
                    <span
                      style="border-bottom: 1px solid #569cd6; color: #569cd6"
                      @click="delCost(item, index, costIndex)"
                      >删除</span
                    >

                    <span
                      style="
                        border-bottom: 1px solid #569cd6;
                        color: #569cd6;
                        margin-left: 10px;
                      "
                      v-if="
                        (item.invoiceReview != '1' && item.liApprove != '1' && item.liuApprove != '1' && item.principalApprove != '1') && Number(item.actualPrice) > Number(item.verifiedAmount)
                      "
                      @click="ticketCost(item, '供应商', costIndex)"
                      >追加</span
                    >
                  </el-col>
                  <el-col :span="1">
                    {{ index + 1 }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.purchaseTableSequence }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.actualPrice }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.paymentDate }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.invoiceStatus }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.verifiedAmount }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.invoiceStatus }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                  <el-col :span="2">
                    {{ item.paymentAccount }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                </el-row>
              </div>
            </div>
          </div>

          <!-- 其他 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              其他采购
            </div>

            <listTop></listTop>

            <div v-for="(item, index) in otherAddList" :key="index">
              <el-row
                style="
                  margin-bottom: 20px;
                  margin-top: 20px;
                  text-align: center;
                "
              >
                <el-col :span="2"> 无权限 </el-col>
                <el-col :span="2">
                  {{ item.serialNumber }}
                </el-col>
                <el-col :span="4">
                  {{ item.categoryName }}
                </el-col>
                <el-col :span="2">
                  {{ item.specificationModel }}
                </el-col>
                <el-col :span="4">
                  {{ item.supplier }}
                </el-col>
                <el-col :span="2">
                  {{ item.quantity }}
                </el-col>
                <el-col :span="2">
                  {{ item.unitPrice }}
                </el-col>
                <el-col :span="2">
                  {{ item.totalBudget }}
                </el-col>
                <el-col :span="2">
                  <el-button
                    @click="addCostItem('otherAddCostList', '其他', item)"
                    >添加采购</el-button
                  >
                </el-col>
              </el-row>

              <!-- v-if="item.oaOtheraPurchases.length > 0" -->
              <div style="border: 2px solid #ccc">
                <bai-list-top></bai-list-top>

                <el-row
                  style="padding: 15px 20px; text-align: center"
                  v-for="(item, costIndex) in item.oaOtheraPurchases"
                  :key="costIndex"
                >
                  <el-col :span="2">
                    <span
                      style="border-bottom: 1px solid #569cd6; color: #569cd6"
                      @click="delCost(item, index, costIndex)"
                      >删除</span
                    >

                    <span
                      style="
                        border-bottom: 1px solid #569cd6;
                        color: #569cd6;
                        margin-left: 10px;
                      "
                      v-if="
                        (item.invoiceReview != '1' && item.liApprove != '1' && item.liuApprove != '1' && item.principalApprove != '1') && Number(item.actualPrice) > Number(item.verifiedAmount)
                      "
                      @click="ticketCost(item, '供应商', costIndex)"
                      >追加</span
                    >
                  </el-col>
                  <el-col :span="1">
                    {{ index + 1 }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.purchaseTableSequence }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.actualPrice }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.paymentDate }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.invoiceStatus }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.verifiedAmount }}
                  </el-col>
                  <el-col :span="2">
                    {{ item.invoiceStatus }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                  <el-col :span="2">
                    {{ item.paymentAccount }}
                  </el-col>
                  <el-col :span="2"> 无权限 </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>

        <!-- 采购列表 -->
        <div style="flex: 1">
          <h2>采购列表</h2>
          <!-- 供应商采购 -->
          <!--  -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              供应商采购
            </div>

            <!-- <topListCost></topListCost> -->

            <div v-for="(item, index) in vendorAddCostList" :key="index">
              <el-row style="margin-left: 50px; margin-bottom: 20px">
                <el-form
                  style="margin-left: 50px; margin-bottom: 20px"
                  :gutter="15"
                >
                  <!-- 采购序号 -->
                  <el-col :span="6">
                    <el-form-item label="供应商" label-width="80px">
                      <el-input
                        v-model="item.purchaseTableSequence"
                        placeholder="请输入"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 实际价格 -->
                  <el-col :span="6">
                    <el-form-item
                      label="实际价格"
                      label-width="80px"
                      v-if="item.id == '' || item.id == null"
                    >
                      <el-input
                        v-model="item.actualPrice"
                        placeholder="输入金额"
                      />
                    </el-form-item>

                    <el-form-item label="实际价格" label-width="80px" v-else>
                      <el-input
                        v-model="item.actualPrice"
                        placeholder="输入金额"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 支付日期 -->
                  <el-col :span="6">
                    <el-form-item label="支付日期" label-width="80px">
                      <el-date-picker
                        v-model="item.paymentDate"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="过审金额" label-width="80px">
                      <el-input
                        v-model="item.verifiedAmount"
                        placeholder="输入金额"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item
                      label="发票金额"
                      label-width="80px"
                      v-if="item.id == '' || item.id == null"
                    >
                      <el-input
                        v-model="item.invoicePrice"
                        placeholder="输入金额"
                      />
                    </el-form-item>

                    <el-form-item label="发票金额" label-width="80px" v-else>
                      <el-input
                        v-model="item.invoicePrice"
                        placeholder="输入金额"
                        @input="testInput(item)"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 支付账户 -->
                  <el-col :span="6">
                    <el-form-item label="支付账户" label-width="80px">
                      <el-select
                        v-model="item.paymentAccount"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in userPayList"
                          :key="item.paymentAccount"
                          :label="item.paymentAccount"
                          :value="item.paymentAccount"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 填写人 -->
                  <el-col :span="6">
                    <el-form-item label="填写人" label-width="80px">
                      <el-input
                        v-model="item.filler"
                        placeholder="填写人姓名"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="开具发票" label-width="80px">
                      <el-select
                        v-model="item.invoiceStatus"
                        placeholder="请选择"
                      >
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 发票上传 -->
                  <el-col :span="24">
                    <el-form-item
                      label="发票上传"
                      label-width="80px"
                      v-show="item.invoiceStatus == '是'"
                    >
                      <image-upload
                        v-model="item.uploadedInvoice"
                        style="width: 100%"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>

            <!-- 供应商采购的确定按钮 -->
            <div style="text-align: right">
              <el-button @click="submitCostItem('vendorAddCostList')"
                >保存</el-button
              >
            </div>
          </div>

          <!-- 电商采购 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              电商采购
            </div>

            <!-- <topListCost></topListCost> -->

            <div v-for="(item, index) in ECommerceAddCostList" :key="index">
              <el-row style="margin-left: 50px; margin-bottom: 20px">
                <el-form
                  style="margin-left: 50px; margin-bottom: 20px"
                  :gutter="15"
                >
                  <!-- 采购序号 -->
                  <el-col :span="6">
                    <el-form-item label="供应商" label-width="80px">
                      <el-input
                        v-model="item.purchaseTableSequence"
                        placeholder="请输入"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 实际价格 -->
                  <el-col :span="6">
                    <el-form-item label="实际价格" label-width="80px">
                      <el-input
                        v-model="item.actualPrice"
                        placeholder="输入金额"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 支付日期 -->
                  <el-col :span="6">
                    <el-form-item label="支付日期" label-width="80px">
                      <el-date-picker
                        v-model="item.paymentDate"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item
                      label="发票金额"
                      label-width="80px"
                      v-if="item.id == '' || item.id == null"
                    >
                      <el-input
                        v-model="item.invoicePrice"
                        placeholder="输入金额"
                      />
                    </el-form-item>

                    <el-form-item label="发票金额" label-width="80px" v-else>
                      <el-input
                        v-model="item.invoicePrice"
                        placeholder="输入金额"
                        @input="testInput(item)"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 支付账户 -->
                  <el-col :span="6">
                    <el-form-item label="支付账户" label-width="80px">
                      <el-select
                        v-model="item.paymentAccount"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in userPayList"
                          :key="item.paymentAccount"
                          :label="item.paymentAccount"
                          :value="item.paymentAccount"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 填写人 -->
                  <el-col :span="6">
                    <el-form-item label="填写人" label-width="80px">
                      <el-input
                        v-model="item.filler"
                        placeholder="填写人姓名"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="开具发票" label-width="80px">
                      <el-select
                        v-model="item.invoiceStatus"
                        placeholder="请选择"
                      >
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 发票上传 -->
                  <el-col :span="24">
                    <el-form-item
                      label="发票上传"
                      label-width="80px"
                      v-show="item.invoiceStatus == '是'"
                    >
                      <image-upload
                        v-model="item.uploadedInvoice"
                        style="width: 100%"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>

            <!-- 供应商采购的确定按钮 -->
            <div style="text-align: right">
              <el-button @click="submitCostItem('ECommerceAddCostList')"
                >保存</el-button
              >
            </div>
          </div>

          <!-- 零星采购 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              零星采购
            </div>

            <!-- <topListCost></topListCost> -->

            <div v-for="(item, index) in sporadicAddCostList" :key="index">
              <el-row style="margin-left: 50px; margin-bottom: 20px">
                <el-form
                  style="margin-left: 50px; margin-bottom: 20px"
                  :gutter="15"
                >
                  <!-- 采购序号 -->
                  <el-col :span="6">
                    <el-form-item label="供应商" label-width="80px">
                      <el-input
                        v-model="item.purchaseTableSequence"
                        placeholder="请输入"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 实际价格 -->
                  <el-col :span="6">
                    <el-form-item label="实际价格" label-width="80px">
                      <el-input
                        v-model="item.actualPrice"
                        placeholder="输入金额"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 支付日期 -->
                  <el-col :span="6">
                    <el-form-item label="支付日期" label-width="80px">
                      <el-date-picker
                        v-model="item.paymentDate"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item
                      label="发票金额"
                      label-width="80px"
                      v-if="item.id == '' || item.id == null"
                    >
                      <el-input
                        v-model="item.invoicePrice"
                        placeholder="输入金额"
                      />
                    </el-form-item>

                    <el-form-item label="发票金额" label-width="80px" v-else>
                      <el-input
                        v-model="item.invoicePrice"
                        placeholder="输入金额"
                        @input="testInput(item)"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 支付账户 -->
                  <el-col :span="6">
                    <el-form-item label="支付账户" label-width="80px">
                      <el-select
                        v-model="item.paymentAccount"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in userPayList"
                          :key="item.paymentAccount"
                          :label="item.paymentAccount"
                          :value="item.paymentAccount"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 填写人 -->
                  <el-col :span="6">
                    <el-form-item label="填写人" label-width="80px">
                      <el-input
                        v-model="item.filler"
                        placeholder="填写人姓名"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="开具发票" label-width="80px">
                      <el-select
                        v-model="item.invoiceStatus"
                        placeholder="请选择"
                      >
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 发票上传 -->
                  <el-col :span="24">
                    <el-form-item
                      label="发票上传"
                      label-width="80px"
                      v-show="item.invoiceStatus == '是'"
                    >
                      <image-upload
                        v-model="item.uploadedInvoice"
                        style="width: 100%"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>

            <!-- 供应商采购的确定按钮 -->
            <div style="text-align: right">
              <el-button @click="submitCostItem('sporadicAddCostList')"
                >保存</el-button
              >
            </div>
          </div>

          <!-- 其他采购 -->
          <div>
            <div style="margin: 20px 30px; font-size: 20px; font-weight: bold">
              其他采购
            </div>

            <div v-for="(item, index) in otherAddCostList" :key="index">
              <el-row style="margin-left: 50px; margin-bottom: 20px">
                <el-form
                  style="margin-left: 50px; margin-bottom: 20px"
                  :gutter="15"
                >
                  <!-- 采购序号 -->
                  <el-col :span="6">
                    <el-form-item label="供应商" label-width="80px">
                      <el-input
                        v-model="item.purchaseTableSequence"
                        placeholder="请输入"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 实际价格 -->
                  <el-col :span="6">
                    <el-form-item label="实际价格" label-width="80px">
                      <el-input
                        v-model="item.actualPrice"
                        placeholder="输入金额"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 支付日期 -->
                  <el-col :span="6">
                    <el-form-item label="支付日期" label-width="80px">
                      <el-date-picker
                        v-model="item.paymentDate"
                        type="date"
                        placeholder="选择日期"
                        style="width: 100%"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item
                      label="发票金额"
                      label-width="80px"
                      v-if="item.id == '' || item.id == null"
                    >
                      <el-input
                        v-model="item.invoicePrice"
                        placeholder="输入金额"
                      />
                    </el-form-item>

                    <el-form-item label="发票金额" label-width="80px" v-else>
                      <el-input
                        v-model="item.invoicePrice"
                        placeholder="输入金额"
                        @input="testInput(item)"
                      />
                    </el-form-item>
                  </el-col>

                  <!-- 支付账户 -->
                  <el-col :span="6">
                    <el-form-item label="支付账户" label-width="80px">
                      <el-select
                        v-model="item.paymentAccount"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in userPayList"
                          :key="item.paymentAccount"
                          :label="item.paymentAccount"
                          :value="item.paymentAccount"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 填写人 -->
                  <el-col :span="6">
                    <el-form-item label="填写人" label-width="80px">
                      <el-input
                        v-model="item.filler"
                        placeholder="填写人姓名"
                        size="small"
                        :disabled="true"
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="6">
                    <el-form-item label="开具发票" label-width="80px">
                      <el-select
                        v-model="item.invoiceStatus"
                        placeholder="请选择"
                      >
                        <el-option label="是" value="是"></el-option>
                        <el-option label="否" value="否"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!-- 发票上传 -->
                  <el-col :span="24">
                    <el-form-item
                      label="发票上传"
                      label-width="80px"
                      v-show="item.invoiceStatus == '是'"
                    >
                      <image-upload
                        v-model="item.uploadedInvoice"
                        style="width: 100%"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>

            <!-- 供应商采购的确定按钮 -->
            <div style="text-align: right">
              <el-button @click="submitCostItem('otherAddCostList')"
                >保存</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 文件上传弹出层 -->
    <el-dialog
      :title="uploadTitle"
      :visible.sync="openUpload"
      width="800px"
      append-to-body
    >
      <div>
        <el-upload
          v-show="uploadShow"
          class="upload-demo"
          action="http://192.168.1.91:6677/system/initiation/importExcel?file="
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
          accept="image/jpeg, image/png, application/pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        >
          <el-upload
            v-show="elsxShow"
            class="upload-demo"
            action="http://192.168.1.91:6677/system/initiation/importExcel?flie="
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            accept="image/jpeg, image/png, application/pdf, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          ></el-upload>
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png/pdf/xls/xlsx文件，且不超过5MB
          </div>
        </el-upload>
      </div>
    </el-dialog>

    <!-- 立项合同上传弹出层 -->
    <el-dialog
      title="立项合同上传"
      :visible.sync="openFile"
      width="80%"
      append-to-body
    >
      <el-form ref="form" :model="formFile" label-width="80px">
        <!-- <el-form-item label="立项编号" prop="initiationId">
          <el-input
            v-model="formFile.initiationId"
            placeholder="请输入立项编号"
          />
        </el-form-item> -->
        <el-form-item label="供应商合同" prop="supplierContract">
          <file-upload v-model="formFile.supplierContract" />
        </el-form-item>
        <el-form-item label="满意度评价" prop="satisfactionEvaluation">
          <file-upload v-model="formFile.satisfactionEvaluation" />
        </el-form-item>
        <el-form-item label="供货清单" prop="supplyList">
          <file-upload v-model="formFile.supplyList" />
        </el-form-item>
        <el-form-item label="甲方合同" prop="partyAContract">
          <file-upload v-model="formFile.partyAContract" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFile">确 定</el-button>
        <el-button
          @click="
            () => {
              formFile = false;
            }
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 应付汇总列表 -->
    <el-dialog
      title="应付汇总列表"
      :visible.sync="openCope"
      width="80%"
      append-to-body
    >
      <CpenTop />

      <el-row
        v-for="(item, index) in formCope"
        :key="index"
        style="margin-top: 20px"
      >
        <el-col :span="2">
          <el-input v-model="item.projectNumber" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="item.projectName" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="item.quotationAmount" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="item.settlementAmount" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="item.personInCharge" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="item.isAmountSettled" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="item.supplierName" :disabled="true"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input v-model="item.startDate" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="item.completionDate" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2">
          <el-input
            v-model="item.isProjectCompleted"
            :disabled="true"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-input v-model="item.remarks"></el-input>
        </el-col>
        <el-col :span="1">
          <el-button @click="changePay(item)">支付</el-button>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCope">确 定</el-button>
        <el-button
          @click="
            () => {
              openCope = false;
              formCope = {};
              expenseShow = false;
            }
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 去支付弹出层 -->
    <el-dialog
      title="去支付"
      :visible.sync="openPay"
      width="80%"
      append-to-body
    >
      <el-form ref="form" :model="formPay" label-width="80px">
        <el-form-item label="总金额" prop="totalAmount">
          <el-input v-model="formPay.totalAmount" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="付款金额" prop="paymentAmount">
          <el-input v-model="formPay.paymentAmount"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPay">确 定</el-button>
        <el-button
          @click="
            () => {
              openPay = false;
              formPay = {
                initiationId: null,
                supplierId: null,
                totalAmount: null,
                paymentAmount: null,
              };
            }
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 应收汇总弹出层 -->
    <el-dialog
      title="应收汇总"
      :visible.sync="openReceivable"
      width="80%"
      append-to-body
    >
      <ReceivableTop></ReceivableTop>

      <el-row
        v-for="(item, index) in formReceivable"
        :key="index"
        style="margin-top: 20px"
      >
        <el-col :span="3">
          <el-input
            v-model="item.clientInvoiceName"
            disabled
            placeholder="请输入甲方"
          />
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="item.projectNumber"
            disabled
            placeholder="请输入项目编号"
          />
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="item.projectName"
            disabled
            placeholder="请输入项目名称"
          />
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="item.invoicedAmount"
            disabled
            placeholder="请输入开票金额"
          />
        </el-col>
        <el-col :span="3">
          <el-date-picker
            clearable
            v-model="item.invoiceDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择开票日期"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="item.projectLeader"
            disabled
            placeholder="请输入项目负责人"
          />
        </el-col>
        <el-col :span="2">
          <el-input
            v-model="item.isPaid"
            disabled
            placeholder="请输入是否回款"
          />
        </el-col>
        <el-col :span="3">
          <el-input v-model="item.remarks" placeholder="请输入备注" />
        </el-col>
        <el-col :span="1">
          <el-button
            @click="
              () => {
                changeReceivable(item);
              }
            "
            >收款</el-button
          >
        </el-col>
      </el-row>
      <!-- <div slot="footer" class="dialog-footer left-align-footer">
        <el-button @click="addReceivable">新 增</el-button>
      </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReceivable">提 交</el-button>
      </div>
    </el-dialog>

    <!-- 合同金额弹出层 -->
    <el-dialog
      title="合同金额"
      :visible.sync="openMoney"
      width="80%"
      append-to-body
    >
      <el-form ref="form" :model="formMoney" label-width="80px">
        <el-form-item label="合同金额" prop="contractAmount">
          <el-input v-model="formMoney.contractAmount"></el-input>
        </el-form-item>

        <div>
          <el-button type="primary" @click="submitMoney">确 定</el-button>
          <el-button
            @click="
              () => {
                openMoney = false;
                formMoney = {};
              }
            "
            >取 消</el-button
          >
        </div>
      </el-form>
    </el-dialog>

    <!-- 金额汇总弹出层 -->
    <el-dialog :visible.sync="openSummary" width="80%" append-to-body>
      <el-descriptions title="金额汇总" :column="1" border>
        <el-descriptions-item label="预算金额合计">{{
          initlationFrom.totalBudgetAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="实际金额合计">{{
          initlationFrom.totalActualAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="付款金额合计">{{
          initlationFrom.totalPaymentAmount
        }}</el-descriptions-item>
        <el-descriptions-item label="成本率">{{
          initlationFrom.reservedField1
        }}</el-descriptions-item>
        <el-descriptions-item label="利润率">{{
          initlationFrom.profitMargin
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import {
  listInitiation,
  getInitiation,
  delInitiation,
  addInitiation,
  updateInitiation,
  getFiller,
  updateProject,
  updateContractAmount,
} from "@/api/project/initiation";
import { getCarbonDetail } from "@/api/department/index";
import {
  addsApplication,
  getApplicationList,
  delApplication,
} from "@/api/invoice/application";
import { page } from "@/api/page";
import { listNumber } from "@/api/project/number";
import listTop from "../../../components/listTop.vue";
import topListCost from "../../../components/topListCost.vue";
import {
  addOther,
  updateOther,
  delOther,
  getDataBySupplierId,
} from "@/api/vendor/other";
import { handleInputQuotedPrice, formatDateArray } from "@/utils/myUtil";
import {
  addContract,
  updateContract,
  getInitiationIdContract,
} from "@/api/vendor/contract";
import {
  addsPurchase,
  updatePurchase,
  delPurchase,
} from "@/api/vendor/purchase";
import InvoiceTop from "../../../components/invoiceTop.vue";
import {
  updateCope,
  getCopeList,
  getCopeListB,
  paySum,
} from "@/api/incomeExpenses/cope";
import CpenTop from "../../../components/CpenTop.vue";
import {
  getReceivableList,
  updateReceivable,
} from "@/api/incomeExpenses/receivable";
import ReceivableTop from "../../../components/ReceivableTop.vue";
import { listUnit } from "@/api/unit/unit";
import { listAffiliation } from "@/api/unit/affiliation";
import { listSecondaryUnit } from "@/api/unit/secondaryUnit";
import { listSuppliers } from "@/api/vendor/suppliers";
import { listRate } from "@/api/invoice/rate";
import { listTypes } from "@/api/invoice/types";
import { listCompany } from "@/api/invoice/company";
import BaiListTop from "../../../components/baiListTop.vue";
import SumData from "../../../components/sumData.vue";

export default {
  name: "Initiation",
  components: {
    listTop,
    topListCost,
    InvoiceTop,
    CpenTop,
    ReceivableTop,
    BaiListTop,
    SumData
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 记录项目立项的相关信息表格数据
      initiationList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        industry: null,
        company: null,
        secondaryCompany: null,
        projectContent: null,
        quotedPrice: null,
        commencementDate: null,
        completionDate: null,
        partyAContact: null,
        initiationPersonInCharge: null,
        projectNumber: null,
        financialApproval: null,
        managementApproval: null,
        creationDate: null,
        reservedField1: null,
        reservedField2: null,
        profitMargin: null,
        actualCost: null,
        budgetCost: null,
      },
      // 表单参数
      form: {
        id: null,
        industry: null,
        company: null,
        secondaryCompany: null,
        projectContent: null,
        quotedPrice: null,
        commencementDate: null,
        completionDate: null,
        partyAContact: null,
        initiationPersonInCharge: null,
        projectNumber: null,
        financialApproval: null,
        managementApproval: null,
        creationDate: null,
        reservedField1: null,
        reservedField2: null,
        profitMargin: null,
        actualCost: null,
        budgetCost: null,
      },
      // 表单校验
      rules: {},
      // 文件上传开关
      openUpload: false,
      // 文件列表
      fileList: [],
      elsxShow: false,
      uploadShow: false,
      uploadTitle: "",
      vendorAddList: [],
      ECommerceAddList: [],
      sporadicAddList: [],
      otherAddList: [],
      initlationFrom: {},
      openCost: false,
      vendorAddCostList: [],
      ECommerceAddCostList: [],
      sporadicAddCostList: [],
      otherAddCostList: [],
      suppliersList: [],
      userPayList: [],
      invoiceList: [],
      openInvoice: false,
      typeList: [],
      formFile: {
        id: null,
        initiationId: null,
        supplierContract: null,
        satisfactionEvaluation: null,
        supplyList: null,
        partyAContract: null,
        initiationId: "",
      },
      openFile: false,
      expenseShow: false,
      openCope: false,
      formCope: [],
      openPay: false,
      formPay: {
        initiationId: null,
        supplierId: null,
        totalAmount: null,
        paymentAmount: null,
      },
      userName: "",
      formReceivable: [],
      openReceivable: false,
      openMoney: false,
      formMoney: {},
      userFilledBy: "",
      unitList: [],
      affiliationList: [],
      secondaryUnitList: [],
      suppliersList: [],
      supplierList: [],
      budgetMoney: null,
      rateList: [],
      isList: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      invoiceTypeList: [
        {
          label: "专票",
        },
        {
          label: "普票",
        },
      ],
      typesList: [],
      companyList: [],
      openSummary: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询记录项目立项的相关信息列表 */
    async getList() {
      this.loading = true;

      const userInfo = JSON.parse(sessionStorage.getItem("userInfo")) || {};
      console.log("userInfo:", userInfo);
      this.userName = userInfo.user.userName;
      console.log("查询参数:", this.queryParams);
      if (this.queryParams.commencementDate) {
        const [startDate, endDate] = formatDateArray(
          this.queryParams.commencementDate
        );
        this.queryParams.commencementDate = startDate;
        this.queryParams.completionDate = endDate;
      }
      await listInitiation(this.queryParams).then((response) => {
        this.initiationList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

      await listNumber(page).then((res) => {
        this.typeList = res.rows;
        console.log("类型列表:", res.rows);
      });

      await getFiller(this.userName).then((res) => {
        console.log("用户绑定账户：", res.data);
        this.userPayList = res.data;
      });

      await listUnit(page).then((res) => {
        this.unitList = res.rows.map((item) => ({
          value: item.id,
          label: item.unitName,
        }));
      });

      await listAffiliation(page).then((res) => {
        console.log("隶属单位列表:", res.rows);
        this.affiliationList = res.rows;
      });

      await listSecondaryUnit(page).then((res) => {
        console.log("二级单位列表:", res.rows);
        this.secondaryUnitList = res.rows;
      });

      await listSuppliers(page).then((res) => {
        console.log("供应商列表:", res.rows);
        this.suppliersList = res.rows;
      });

      this.affiliationList.forEach((affiliation) => {
        // 遍历 secondaryUnitList，匹配 industryId 和 affiliation.id
        const matchingItems = this.secondaryUnitList.filter(
          (secondary) => secondary.industryId === affiliation.id
        );

        if (matchingItems.length > 0) {
          // 如果 affiliation 没有 children 字段，则初始化为空数组
          if (!affiliation.children) {
            affiliation.children = [];
          }

          // 将匹配的项的 secondaryUnitName 和 id 填入 affiliation.children
          matchingItems.forEach((item) => {
            affiliation.children.push({
              label: item.secondaryUnitName,
              value: item.id,
            });
          });
        }
      });

      this.affiliationList.forEach((affiliation) => {
        // 在 unitList 中查找与 affiliation.unitId 匹配的项
        const matchingUnit = this.unitList.find(
          (unit) => unit.value === affiliation.unitId
        );

        if (matchingUnit) {
          // 如果 matchingUnit 没有 children 字段，则初始化为空数组
          if (!matchingUnit.children) {
            matchingUnit.children = [];
          }

          // 构造 affiliation 的子项
          const newChild = {
            value: affiliation.id,
            label: affiliation.industry,
          };

          // 如果 affiliation 存在 children，则一并带入
          if (affiliation.children && affiliation.children.length > 0) {
            newChild.children = affiliation.children;
          }

          // 将新子项添加到 matchingUnit 的 children 中
          matchingUnit.children.push(newChild);
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        industry: null,
        company: null,
        secondaryCompany: null,
        projectContent: null,
        quotedPrice: null,
        commencementDate: null,
        completionDate: null,
        partyAContact: null,
        initiationPersonInCharge: null,
        projectNumber: null,
        financialApproval: null,
        managementApproval: null,
        creationDate: null,
        reservedField1: null,
        reservedField2: null,
        profitMargin: null,
        actualCost: null,
        budgetCost: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加记录项目立项的相关信息";
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      this.initlationFrom = row;
      console.log("修改按钮操作:", row);
      this.userName = row.initiationPersonInCharge;
      this.userFilledBy = row.initiationPersonInCharge;
      this.vendorAddList = [];
      this.ECommerceAddList = [];
      this.sporadicAddList = [];
      this.otherAddList = [];

      // this.vendorAddCostList = [];
      // this.ECommerceAddCostList = [];
      // this.sporadicAddCostList = [];
      // this.otherAddCostList = [];

      this.reset();
      const id = row.id || this.ids;

      await getInitiation(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改记录项目立项的相关信息";
      });

      console.log("当前项详细数据:", this.form);
      console.log("行列数组:", this.unitList);

      await getCarbonDetail(id).then((response) => {
        console.log("立项采购数据:", response.data);
        // 预算列表分流
        if (response.data.oaOtherVo.length > 0) {
          response.data.oaOtherVo.forEach((item) => {
            switch (item.type) {
              case "供应商":
                this.vendorAddList.push(item);
                break;
              case "电商":
                this.ECommerceAddList.push(item);
                break;
              case "零星":
                this.sporadicAddList.push(item);
                break;
              case "其他":
                this.otherAddList.push(item);
                break;
              default:
                console.error("未知的采购类型:", item.type);
            }
            // this.getTotalBudget();
          });
        } else {
          return;
        }
      });
    },
    handleUp(row) {
      updateInitiation(row).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.open = false;
        this.getList();
      });
    },
    /** 提交按钮 */
    submitForm() {
      console.log("提交表单数据:", this.form);

      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateInitiation(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addInitiation(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm(
          '是否确认删除记录项目立项的相关信息编号为"' + ids + '"的数据项？'
        )
        .then(function () {
          return delInitiation(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/initiation/export",
        {
          ...this.queryParams,
        },
        `initiation_${new Date().getTime()}.xlsx`
      );
    },
    /** 导入按钮操作 */
    handleUpload() {
      this.openUpload = true;
      this.uploadTitle = "资料导入";
      this.uploadShow = true;
    },
    elsxUpload() {
      this.openUpload = true;
      this.uploadTitle = "表格导入";
      this.elsxShow = true;
    },
    // 文件上传前的钩子
    beforeUpload(file) {
      // 检查文件是否为图片（jpg/png）
      const isImage = file.type === "image/jpeg" || file.type === "image/png";
      // 检查文件是否为PDF
      const isPDF = file.type === "application/pdf";
      // 检查文件是否为Excel文件（xls/xlsx）
      const isExcel =
        file.type === "application/vnd.ms-excel" ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      // 检查文件大小是否小于5MB
      const isLt5M = file.size / 1024 / 1024 < 5;

      // 如果文件不是图片、PDF或Excel文件，则显示错误消息
      if (!isImage && !isPDF && !isExcel) {
        this.$message.error("只能上传jpg/png/pdf/xls/xlsx文件!");
      }
      // 如果文件大小超过5MB，则显示错误消息
      if (!isLt5M) {
        this.$message.error("上传文件大小不能超过 5MB!");
      }
      // 返回文件是否符合要求
      return (isImage || isPDF || isExcel) && isLt5M;
    },
    // 文件列表发生变动时调用
    handleRemove(file, fileList) {
      // 打印移除的文件和剩余的文件列表
      console.log("文件列表：", file, fileList);
    },
    // 文件预览
    handlePreview(file) {
      // 打印预览的文件信息
      console.log("文件预览", file);
    },
    handleExceed(files, fileList) {
      // 显示警告消息，提示用户当前选择的文件数量超过了限制
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 文件移除
    beforeRemove(file, fileList) {
      // 弹出确认对话框，询问用户是否确定移除文件
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件上传成功的回调函数
    handleSuccess(response, file, fileList) {
      console.log("文件上传返回值", response);
      console.log("上传文件", file);
      console.log("文件列表", fileList);
      this.$message.success("文件上传成功！");
      // 可以在这里添加其他逻辑，比如刷新文件列表等
    },
    // 新增函数
    addItem(type, typeValue) {
      // 确保 this[type] 存在且是数组
      if (!this[type] || !Array.isArray(this[type])) {
        console.warn(`this[${type}] 未定义或不是数组，正在初始化为空数组`);
        this[type] = [];
      }

      const newItem = {
        serialNumber: this[type].length + 1, // 根据数组长度自动生成序号
        categoryName: "",
        specificationModel: "",
        supplier: "",
        quantity: "",
        unitPrice: "",
        totalBudget: "",
        agent: this.initlationFrom.initiationPersonInCharge,
        creationTime: "",
        initiationId: this.initlationFrom.id,
        type: typeValue,
      };

      this[type].push(newItem);
      console.log(type + ":", this[type]);
    },
    // 提交函数
    submitItem(type) {
      switch (type) {
        case "vendorAddList":
          console.log("供应商采购数据:", this.vendorAddList);
          this.checkAndSubmit(this.vendorAddList, "供应商采购");
          break;
        case "ECommerceAddList":
          console.log("电商采购数据:", this.ECommerceAddList);
          this.checkAndSubmit(this.ECommerceAddList, "电商采购");
          break;
        case "sporadicAddList":
          console.log("零星采购数据:", this.sporadicAddList);
          this.checkAndSubmit(this.sporadicAddList, "零星采购");
          break;
        case "otherAddList":
          console.log("其他采购数据:", this.otherAddList);
          this.checkAndSubmit(this.otherAddList, "其他采购");
          break;
        default:
          console.error("未知的类型:", type);
      }
      // this.getTotalBudget();
    },
    checkAndSubmit(list, type) {
      // 检查是否存在重复的 categoryName
      const categoryNames = new Set();
      for (const item of list) {
        if (categoryNames.has(item.categoryName)) {
          this.$message.error("存在重复的分类名称，禁止提交！");
          return; // 阻止提交
        }
        categoryNames.add(item.categoryName);
      }

      // 如果没有重复数据，执行新增或修改逻辑
      const promises = list.map((item) => {
        if (item.id == null || item.id === "") {
          // 新增接口
          return addOther(item).then((res) => {
            if (res.code === 200) {
              this.$message.success(`${type} 新增成功`);
            } else {
              this.$message.error(`${type} 新增失败`);
            }
          });
        } else {
          // 修改接口
          return updateOther(item).then((res) => {
            if (res.code === 200) {
              this.$message.success(`${type} 修改成功`);
            } else {
              this.$message.error(`${type} 修改失败`);
            }
          });
        }
      });

      // 等待所有接口调用完成
      Promise.all(promises).then(() => {
        console.log(`${type} 所有操作完成`);
      });
    },
    // 重置数组函数
    resetArrays() {
      this.vendorAddList = [
        {
          serialNumber: 1,
          categoryName: "",
          specificationModel: "",
          supplier: "",
          quantity: "",
          unitPrice: "",
          totalBudget: "",
          agent: this.initlationFrom.initiationPersonInCharge,
          creationTime: "",
          initiationId: this.initlationFrom.id,
          type: "供应商",
        },
      ];
      this.ECommerceAddList = [
        {
          serialNumber: "1",
          categoryName: "",
          specificationModel: "",
          supplier: "",
          quantity: "",
          unitPrice: "",
          totalBudget: "",
          agent: this.initlationFrom.initiationPersonInCharge,
          creationTime: "",
          initiationId: this.initlationFrom.id,
          type: "电商",
        },
      ];
      this.sporadicAddList = [
        {
          serialNumber: "1",
          categoryName: "",
          specificationModel: "",
          supplier: "",
          quantity: "",
          unitPrice: "",
          totalBudget: "",
          agent: this.initlationFrom.initiationPersonInCharge,
          creationTime: "",
          initiationId: this.initlationFrom.id,
          type: "零星",
        },
      ];
      this.otherAddList = [
        {
          serialNumber: "1",
          categoryName: "",
          specificationModel: "",
          supplier: "",
          quantity: "",
          unitPrice: "",
          totalBudget: "",
          agent: this.initlationFrom.initiationPersonInCharge,
          creationTime: "",
          initiationId: this.initlationFrom.id,
          type: "其他",
        },
      ];
      console.log(
        "重置数组:",
        this.vendorAddList,
        this.ECommerceAddList,
        this.sporadicAddList,
        this.otherAddList
      );
    },
    // 重置实付数组
    resetCostArrays() {
      this.vendorAddCostList = [
        {
          actualPrice: "",
          createBy: "",
          createTime: "",
          filler: this.initlationFrom.initiationPersonInCharge,
          id: "",
          initiationId: this.initlationFrom.id,
          invoicePrice: "",
          invoiceStatus: "未开",
          isAdditionalItem: 0,
          paymentAccount: "",
          paymentAmount: "",
          paymentDate: "",
          purchaseTableSequence: "",
          reimbursementPaymentDate: "",
          remark: "",
          type: "供应商",
          updateBy: "",
          updateTime: "",
          uploadedInvoice: "",
        },
      ];
      this.ECommerceAddCostList = [
        {
          actualPrice: "",
          createBy: "",
          createTime: "",
          filler: this.initlationFrom.initiationPersonInCharge,
          id: "",
          initiationId: this.initlationFrom.id,
          invoicePrice: "",
          invoiceStatus: "未开",
          isAdditionalItem: 0,
          paymentAccount: "",
          paymentAmount: "",
          paymentDate: "",
          purchaseTableSequence: "",
          reimbursementPaymentDate: "",
          remark: "",
          type: "电商",
          updateBy: "",
          updateTime: "",
          uploadedInvoice: "",
        },
      ];
      this.sporadicAddCostList = [
        {
          actualPrice: "",
          createBy: "",
          createTime: "",
          filler: this.initlationFrom.initiationPersonInCharge,
          id: "",
          initiationId: this.initlationFrom.id,
          invoicePrice: "",
          invoiceStatus: "未开",
          isAdditionalItem: 0,
          paymentAccount: "",
          paymentAmount: "",
          paymentDate: "",
          purchaseTableSequence: "",
          reimbursementPaymentDate: "",
          remark: "",
          type: "零星",
          updateBy: "",
          updateTime: "",
          uploadedInvoice: "",
        },
      ];
      this.otherAddCostList = [
        {
          actualPrice: "",
          createBy: "",
          createTime: "",
          filler: this.initlationFrom.initiationPersonInCharge,
          id: "",
          initiationId: this.initlationFrom.id,
          invoicePrice: "",
          invoiceStatus: "未开",
          isAdditionalItem: 0,
          paymentAccount: "",
          paymentAmount: "",
          paymentDate: "",
          purchaseTableSequence: "",
          reimbursementPaymentDate: "",
          remark: "",
          type: "其他",
          updateBy: "",
          updateTime: "",
          uploadedInvoice: "",
        },
      ];
    },
    // 封装采购类型初始化函数
    initPurchaseType(type, budgetList, targetProperty) {
      const items = budgetList.filter((item) => item.type === type);
      const suppliers = [...new Set(items.map((item) => item.supplier))];
      const options = suppliers.map((supplier) => ({ value: supplier }));

      this[targetProperty] = [];
      options.forEach((supplier) => {
        this[targetProperty].push({
          actualPrice: "",
          createBy: "",
          createTime: "",
          filler: this.initlationFrom.initiationPersonInCharge,
          id: "",
          initiationId: this.initlationFrom.id,
          invoicePrice: "",
          invoiceStatus: "未开",
          isAdditionalItem: "",
          paymentAccount: "",
          paymentAmount: "",
          paymentDate: "",
          purchaseTableSequence: supplier.value,
          reimbursementPaymentDate: "",
          remark: "",
          type: type,
          updateBy: "",
          updateTime: "",
          uploadedInvoice: "",
        });
      });
    },
    async handleCost(row) {
      this.userFilledBy = row.initiationPersonInCharge;
      // console.log("实际成本:", row);

      this.vendorAddList = [];
      this.ECommerceAddList = [];
      this.sporadicAddList = [];
      this.otherAddList = [];

      this.vendorAddCostList = [];
      this.ECommerceAddCostList = [];
      this.sporadicAddCostList = [];
      this.otherAddCostList = [];

      const id = row.id || this.ids;
      this.initlationFrom = row;

      // this.resetCostArrays();

      await getCarbonDetail(id).then((response) => {
        console.log("立项采购数据:", response.data);
        // 遍历 response.data.oaOthers，根据 type 划分到不同数组
        response.data.oaOtherVo.forEach((item) => {
          switch (item.type) {
            case "供应商":
              this.vendorAddList.push(item);
              break;
            case "电商":
              this.ECommerceAddList.push(item);
              break;
            case "零星":
              this.sporadicAddList.push(item);
              break;
            case "其他":
              this.otherAddList.push(item);
              break;
            default:
              console.error("未知的采购类型:", item.type);
          }
        });
      });

      this.openCost = true;
    },
    // 点击添加发票
    async handleInvoice(row) {
      this.initlationFrom = row;
      this.invoiceList = [];
      console.log("发票数据:", row);
      await getApplicationList(row.id).then((res) => {
        console.log("发票数据:", res);
        if (res.rows.length > 0) {
          this.invoiceList = res.rows;
        } else {
          this.invoiceList.push({
            projectNumber: row.projectNumber,
            clientName: row.secondaryCompany,
            invoicedAmount: 0,
            issuingCompany: "",
            invoiceType: "",
            taxRate: "",
            isApproved: 0,
            issuingType: "",
            projectId: this.initlationFrom.id,
          });
        }
      });

      await listRate(page).then((res) => {
        console.log("税率列表:", res.rows);
        this.rateList = res.rows;
      });

      await listTypes(page).then((res) => {
        console.log("发票类型列表:", res.rows);
        this.typesList = res.rows;
      });

      await listCompany(page).then((res) => {
        console.log("公司列表:", res.rows);
        this.companyList = res.rows;
      });

      this.openInvoice = true;
    },
    // 新增发票
    addInvoice() {
      this.invoiceList.push({
        projectNumber: this.initlationFrom.projectNumber,
        clientName: this.initlationFrom.secondaryCompany,
        invoicedAmount: 0,
        issuingCompany: "",
        invoiceType: "",
        isApproved: 0,
        taxRate: "",
        issuingType: "",
        projectId: this.initlationFrom.id,
      });
    },
    // 新增实付
    addCostItem(type, typeValue, item) {
      // console.log("新增实付对应应付:", item);
      const newItem = {
        oaOtherId: item.id,
        actualPrice: "",
        createBy: "",
        createTime: "",
        filler: this.userName,
        id: "",
        initiationId: this.initlationFrom.id,
        invoicePrice: "",
        invoiceStatus: "未开",
        isAdditionalItem: "",
        paymentAccount: "",
        paymentAmount: "",
        paymentDate: "",
        purchaseTableSequence: item.supplier,
        reimbursementPaymentDate: "",
        remark: "",
        type: typeValue,
        updateBy: "",
        updateTime: "",
        uploadedInvoice: "",
      };

      switch (type) {
        case "vendorAddCostList":
          this.vendorAddCostList.push(newItem);
          break;
        case "ECommerceAddCostList":
          this.ECommerceAddCostList.push(newItem);
          break;
        case "sporadicAddCostList":
          this.sporadicAddCostList.push(newItem);
          break;
        case "otherAddCostList":
          this.otherAddCostList.push(newItem);
          break;
        default:
          console.error("未知的类型:", type);
      }
      console.log(type + ":", this[type]);
    },
    // 判断是否增项函数
    checkAdditionalItem(
      budgetList, // 预算数据列表（如 vendorAddList）
      costList, // 实际成本列表（如 vendorAddCostList）
      type // 当前采购类型（如 '供应商'）
    ) {
      // 1. 计算供应商预算映射
      const supplierBudgetMap = {};
      budgetList.forEach((obj) => {
        const name = obj.supplier;
        const money = Number(obj.totalBudget); // 确保数值类型
        supplierBudgetMap[name] = (supplierBudgetMap[name] || 0) + money;
      });

      // 2. 遍历成本列表设置增项标记
      costList.forEach((costItem) => {
        const supplierName = costItem.purchaseTableSequence;
        const budget = supplierBudgetMap[supplierName];
        const actualPrice = Number(costItem.actualPrice); // 转为数值类型

        costItem.isAdditionalItem =
          budget && actualPrice === budget ? "0" : "1";
      });
    },
    // 提交函数
    async submitCostItem(type) {
      switch (type) {
        case "vendorAddCostList":
          console.log("供应商预算数据:", this.vendorAddList);
          console.log("供应商采购数据:", this.vendorAddCostList);

          this.checkAdditionalItem(
            this.vendorAddList, // 预算数据
            this.vendorAddCostList, // 成本数据
            "供应商" // 采购类型（当前示例不需要，但保留参数供扩展）
          );
          console.log("最终列表：", this.vendorAddCostList);

          this.vendorAddCostList.forEach((item) => {
            let costData = [];
            costData.push(item);
            if (item.id) {
              // 如果存在 id，调用修改接口
              updatePurchase(item).then((res) => {
                if (res.code === 200) {
                  this.$message.success("修改成功");
                  this.vendorAddCostList = [];
                  this.openCost = false;
                } else {
                  this.$message.error("修改失败");
                }
              });
            } else {
              // 如果不存在 id，调用新增接口
              addsPurchase(costData).then((res) => {
                if (res.code === 200) {
                  this.$message.success("新增成功");
                  this.vendorAddCostList = [];
                  this.openCost = false;
                } else {
                  this.$message.error("新增失败");
                }
              });
            }
          });
          break;
        case "ECommerceAddCostList":
          console.log("电商采购数据:", this.ECommerceAddCostList);
          this.checkAdditionalItem(
            this.ECommerceAddList, // 预算数据
            this.ECommerceAddCostList, // 成本数据
            "电商" // 采购类型（当前示例不需要，但保留参数供扩展）
          );
          console.log("最终列表：", this.ECommerceAddCostList);
          this.ECommerceAddCostList.forEach((item) => {
            let costData = [];
            costData.push(item);
            if (item.id) {
              // 如果存在 id，调用修改接口
              updatePurchase(item).then((res) => {
                if (res.code === 200) {
                  this.$message.success("修改成功");
                  this.ECommerceAddCostList = [];
                  this.openCost = false;
                } else {
                  this.$message.error("修改失败");
                }
              });
            } else {
              // 如果不存在 id，调用新增接口
              addsPurchase(costData).then((res) => {
                if (res.code === 200) {
                  this.$message.success("新增成功");
                  this.ECommerceAddCostList = [];
                  this.openCost = false;
                } else {
                  this.$message.error("新增失败");
                }
              });
            }
          });
          break;
        case "sporadicAddCostList":
          console.log("零星采购数据:", this.sporadicAddCostList);
          this.checkAdditionalItem(
            this.sporadicAddList, // 预算数据
            this.sporadicAddCostList, // 成本数据
            "零星" // 采购类型（当前示例不需要，但保留参数供扩展）
          );
          console.log("最终列表：", this.sporadicAddCostList);
          this.sporadicAddCostList.forEach((item) => {
            let costData = [];
            costData.push(item);
            if (item.id) {
              // 如果存在 id，调用修改接口
              updatePurchase(item).then((res) => {
                if (res.code === 200) {
                  this.$message.success("修改成功");
                  this.sporadicAddCostList = [];
                  this.openCost = false;
                } else {
                  this.$message.error("修改失败");
                }
              });
            } else {
              // 如果不存在 id，调用新增接口
              addsPurchase(costData).then((res) => {
                if (res.code === 200) {
                  this.$message.success("新增成功");
                  this.sporadicAddCostList = [];
                  this.openCost = false;
                } else {
                  this.$message.error("新增失败");
                }
              });
            }
          });
          break;
        case "otherAddCostList":
          console.log("其他采购数据:", this.otherAddCostList);
          this.checkAdditionalItem(
            this.otherAddList, // 预算数据
            this.otherAddCostList, // 成本数据
            "零星" // 采购类型（当前示例不需要，但保留参数供扩展）
          );
          console.log("最终列表：", this.otherAddCostList);
          this.otherAddCostList.forEach((item) => {
            let costData = [];
            costData.push(item);
            if (item.id) {
              // 如果存在 id，调用修改接口
              updatePurchase(item).then((res) => {
                if (res.code === 200) {
                  this.$message.success("修改成功");
                  this.otherAddCostList = [];
                  this.openCost = false;
                } else {
                  this.$message.error("修改失败");
                }
              });
            } else {
              // 如果不存在 id，调用新增接口
              addsPurchase(costData).then((res) => {
                if (res.code === 200) {
                  this.$message.success("新增成功");
                  this.otherAddCostList = [];
                  this.openCost = false;
                } else {
                  this.$message.error("新增失败");
                }
              });
            }
          });
          break;
        default:
          console.error("未知的类型:", type);
      }
    },
    handleProject(row) {
      row.ok = "完成";
      updateProject(row.id, row.ok).then((res) => {
        console.log("立项完成", res);
        if (res.code === 200) {
          this.$message.success(`立项成功`);
        } else {
          this.$message.error("立项失败");
        }
      });
    },
    handleReceived(row) {
      row.received = "已回款";
      updateProject(row.id, row.received).then((res) => {
        console.log("回款完成", res);
        if (res.code === 200) {
          this.$message.success(`回款成功`);
        } else {
          this.$message.error("回款失败");
        }
      });
    },
    submitInvoice() {
      let invoiceData = [];
      this.invoiceList.forEach((item) => {
        if (item.id) {
          return;
        } else {
          invoiceData.push(item);
        }
      });
      if (invoiceData.length > 0) {
        addsApplication(invoiceData).then((res) => {
          console.log("发票添加成功", res);
          if (res.code === 200) {
            this.$message.success(`发票添加成功`);
          } else {
            this.$message.error("发票添加失败");
          }
        });
      } else {
        this.$message.error("请添加新发票数据");
      }
    },
    // 封装总价计算函数
    calculateTotalBudget(item) {
      // 校验数量和单价是否为有效数字
      const isValidQuantity = !isNaN(item.quantity) && item.quantity !== "";
      const isValidUnitPrice = !isNaN(item.unitPrice) && item.unitPrice !== "";

      if (isValidQuantity && isValidUnitPrice) {
        const quantity = parseFloat(item.quantity);
        const unitPrice = parseFloat(item.unitPrice);
        item.totalBudget = (quantity * unitPrice).toFixed(2);
      } else {
        item.totalBudget = 0; // 或者显示错误提示
      }
    },
    // 立项合同上传函数
    handleFile(row) {
      console.log("上传文件", row);

      this.initlationFrom = row;
      const id = row.id || this.ids;
      this.formFile = {
        id: null,
        initiationId: null,
        supplierContract: null,
        satisfactionEvaluation: null,
        supplyList: null,
        partyAContract: null,
        initiationId: "",
      };
      getInitiationIdContract(id).then((response) => {
        console.log("查询文件上传：", response.data);
        this.formFile = response.data;
        this.formFile.initiationId = response.data.initiationId;
      });
      this.openFile = true;
    },
    submitFile() {
      if (this.formFile.id != null) {
        updateContract(this.formFile).then((response) => {
          this.$modal.msgSuccess("修改成功");
          this.openFile = false;
          this.formFile = {};
          this.getList();
        });
      } else {
        addContract(this.formFile).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.openFile = false;
          this.formFile = {};
          this.getList();
        });
      }
    },
    handleCope(row) {
      console.log("报销汇总", row);
      this.openCope = true;
      this.initlationFrom = row;
      const id = row.id || this.ids;
      if (this.expenseShow) {
        getCopeListB(id).then((response) => {
          console.log("查询报销汇总：", response.rows);
          this.formCope = response.rows;
        });
      } else {
        getCopeList(id).then((response) => {
          console.log("查询供应商汇总：", response.rows);
          this.formCope = response.rows;
        });
      }
    },
    submitCope() {
      this.formCope.forEach((item) => {
        // 在此处编写循环逻辑
        updateCope(item).then((response) => {
          this.$modal.msgSuccess("修改成功");
        });
      });
      this.openCope = false;
      this.formCope = {};
      this.getList();
    },
    changePay(row) {
      console.log("当前应付支付：", row);
      // this.formPay = row;
      this.formPay.initiationId = row.initiationId;
      this.formPay.supplierId = row.supplierName;
      // 转换为数值类型并保留两位小数
      this.formPay.totalAmount = row.quotationAmount.toFixed(2);
      this.formPay.paymentAmount = 0.0; // 直接初始化为 0.00
      this.openPay = true;
    },
    submitPay() {
      this.formPay.paymentAmount = parseFloat(
        this.formPay.paymentAmount
      ).toFixed(2);
      paySum(this.formPay).then((res) => {
        console.log("支付成功：", res);
        // 支付成功提示
        if (res.code === 200) {
          this.$message.success(`支付成功`);
        } else {
          this.$message.error("支付失败");
        }

        this.openPay = false;
        this.formPay = {
          initiationId: null,
          supplierId: null,
          totalAmount: null,
          paymentAmount: null,
        };
        // this.getList();
      });
    },
    handleReceivable(row) {
      console.log("应收汇总", row);
      this.openReceivable = true;
      this.initlationFrom = row;
      const id = row.id || this.ids;
      getReceivableList(id).then((response) => {
        console.log("查询应收汇总：", response.rows);
        this.formReceivable = response.rows;
      });
      if (this.formReceivable.length !== 0) {
        this.formReceivable.push({
          projectNumber: null,
          projectName: null,
          projectLeader: null,
          isInvoiced: null,
          isPaid: null,
          projectId: row.id,
        });
      }
    },
    submitReceivable() {
      for (let i = 0; i < this.formReceivable.length; i++) {
        const item = this.formReceivable[i];
        updateReceivable(item).then((res) => {
          console.log("发票开具申请单修改", res);
          if (res.code === 200) {
            this.$message.success(`发票开具申请单修改成功`);
          } else {
            this.$message.error("发票开具申请单修改失败");
          }
        });
      }
    },
    changeReceivable(item) {
      item.isPaid = 1;
      updateReceivable(item).then((res) => {
        console.log("发票开具申请单修改", res);
        if (res.code === 200) {
          this.$message.success(`已确认回款`);
        } else {
          this.$message.error("确认回款失败");
        }
      });
    },
    handleInputQuotedPrice(value) {
      // 调用工具函数
      this.form.quotedPrice = handleInputQuotedPrice(value);
    },
    delItem(item, type) {
      console.log(`删除${type}`, item);
      // 根据类型选择对应的删除接口和数组
      let deleteApi, targetList;
      switch (type) {
        case "供应商":
          deleteApi = delOther; // 替换为供应商的删除接口
          targetList = "vendorAddList";
          break;
        case "电商":
          deleteApi = delOther; // 替换为电商的删除接口
          targetList = "ECommerceAddList";
          break;
        case "零星":
          deleteApi = delOther; // 替换为零星的删除接口
          targetList = "sporadicAddList";
          break;
        case "其他":
          deleteApi = delOther; // 替换为其他的删除接口
          targetList = "otherAddList";
          break;
        default:
          console.error("未知的类型:", type);
          return;
      }
      // console.log("删除接口:", deleteApi);
      // console.log("目标列表:", targetList);

      // 执行删除逻辑
      if (item.id) {
        deleteApi(item.id).then((res) => {
          if (res.code === 200) {
            this.$message.success(`删除成功`);
            // 从对应的数组中移除已删除的项
            this[targetList] = this[targetList].filter((i) => i.id !== item.id);
          } else {
            this.$message.error("删除失败");
          }
        });
      } else {
        const index = this[targetList].indexOf(item);
        if (index > -1) {
          this[targetList].splice(index, 1);
          this.$message.success(`删除成功`);
        }
      }
    },
    handleMoney(item) {
      this.openMoney = true;
      this.formMoney = item;
      console.log("合同金额", item);
    },
    submitMoney() {
      console.log("合同金额", this.formMoney);
      updateContractAmount(
        this.formMoney.id,
        this.formMoney.contractAmount
      ).then((res) => {
        console.log("合同金额修改", res);
        if (res.code === 200) {
          this.$message.success(`合同金额修改成功`);
          this.openMoney = false;
          this.formMoney = {};
        } else {
          this.$message.error("合同金额修改失败");
        }
      });
    },
    handleUnitList(e) {
      console.log("选择的单位", e);
      // console.log("选择的单位", this.form.secondaryCompany);
      this.form.company = e[0];
      this.form.industry = e[1];
      this.form.secondaryCompany = e[2];
      // console.log("选择的单位", this.form.secondaryCompany);
      // this.unitList = e;
    },
    async handleSupplierChange(row) {
      console.log("选择的供应商", row);
      await getDataBySupplierId(row).then((res) => {
        console.log("查询供应商数据", res.data);
        this.supplierList = res.data;
      });
    },
    handleSupplier(item, categoryName) {
      console.log("选择的商品", item, categoryName);
      if (typeof categoryName === "string") {
        item.categoryName = categoryName;
      } else if (typeof categoryName === "object") {
        item.unitPrice = categoryName.unitPrice;
        item.quantity = 1;
        item.specificationModel = categoryName.specificationModel;

        item.totalBudget = (item.quantity * item.unitPrice).toFixed(2);
        item.categoryName = categoryName.categoryName;
      }
    },
    delCost(item, index, costIndex) {
      console.log("删除实付", item, index, costIndex);
      // 根据类型选择对应的删除接口和数组
      let deleteApi, targetList;
      switch (item.type) {
        case "供应商":
          deleteApi = delPurchase; // 替换为供应商的删除接口
          targetList = "vendorAddList";
          break;
        case "电商":
          deleteApi = delPurchase; // 替换为电商的删除接口
          targetList = "ECommerceAddList";
          break;
        case "零星":
          deleteApi = delPurchase; // 替换为零星的删除接口
          targetList = "sporadicAddList";
          break;
        case "其他":
          deleteApi = delPurchase; // 替换为其他的删除接口
          targetList = "otherAddList";
          break;
        default:
          console.error("未知的类型:", item.type);
          return;
      }

      console.log("删除接口:", deleteApi);
      console.log("目标列表:", targetList);

      // 执行删除逻辑
      if (item.id) {
        deleteApi(item.id).then((res) => {
          if (res.code === 200) {
            this.$message.success(`删除成功`);
            // 从 targetList 的第 index 条数据的 oaOtheraPurchases 中移除第 costIndex 条数据
            if (
              this[targetList][index] &&
              this[targetList][index].oaOtheraPurchases
            ) {
              this[targetList][index].oaOtheraPurchases.splice(costIndex, 1);
            }
          } else {
            this.$message.error("删除失败");
          }
        });
      } else {
        // 如果没有 id，直接从 targetList 的第 index 条数据的 oaOtheraPurchases 中移除第 costIndex 条数据
        if (
          this[targetList][index] &&
          this[targetList][index].oaOtheraPurchases
        ) {
          this[targetList][index].oaOtheraPurchases.splice(costIndex, 1);
          this.$message.success(`删除成功`);
        }
      }
    },
    ticketCost(item, type, costIndex) {
      console.log("发票开具", item, type, costIndex);
      let deleteApi, targetList;
      switch (type) {
        case "供应商":
          deleteApi = updatePurchase; // 替换为供应商的删除接口
          targetList = "vendorAddCostList";
          break;
        case "电商":
          deleteApi = updatePurchase; // 替换为电商的删除接口
          targetList = "ECommerceAddCostList";
          break;
        case "零星":
          deleteApi = updatePurchase; // 替换为零星的删除接口
          targetList = "sporadicAddCostList";
          break;
        case "其他":
          deleteApi = updatePurchase; // 替换为其他的删除接口
          targetList = "otherAddCostList";
          break;
        default:
          console.error("未知的类型:", item.type);
          return;
      }

      this[targetList] = [];
      item.invoicePrice = 0
      this[targetList].push(item);
      console.log("发票开具数据", this[targetList]);
    },
    deleteInvoice(item) {
      if (item.id) {
        delApplication(item.id).then((res) => {
          if (res.code === 200) {
            this.$message.success(`删除成功`);
            this.invoiceList = this.invoiceList.filter((i) => i.id !== item.id);
          } else {
            this.$message.error("删除失败");
          }
        });
      } else {
        const index = this.invoiceList.indexOf(item);
        if (index > -1) {
          this.invoiceList.splice(index, 1);
          this.$message.success(`删除成功`);
        }
      }
    },
    handleSummary(row) {
      console.log("报销汇总", row);
      this.initlationFrom = row;
      this.openSummary = true;
    },
    testInput(item) {
      console.log("测试输入", item.invoicePrice);
      if (
        Number(item.invoicePrice) >
        Number(item.actualPrice) - Number(item.verifiedAmount)
      ) {
        this.$message.error("发票金额不能大于实际支付金额");
        item.invoicePrice =
          Number(item.actualPrice) - Number(item.verifiedAmount);
      }
    },
  },
};
</script>

<style lang="scss">
/* 统一表单项间距 */
.el-form-item {
  margin-bottom: 12px;
}

/* 输入框圆角优化 */
.el-input__inner {
  border-radius: 4px;
}

.left-align-footer {
  text-align: left;
}
</style>
